<!--
 * @Author: your name
 * @Date: 2022-01-15 07:52:58
 * @LastEditTime: 2022-01-15 10:55:11
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \my-site\src\components\messageArea\components\dataForm.vue
-->
<template>
  <form @submit.prevent="submit" class="dataForm-container">
      <div class="dataForm-container-nickName">
          <input v-model="nickNameWord" placeholder="用户昵称" maxlength="10" @input="nickNameError=''">
          <div class="numberWord"><span>{{nickNameNumberWord}}</span>/10</div>
          <div class="nickNameError">{{nickNameError}}</div>
      </div>
      <div class="dataForm-container-content">
          <textarea v-model="contentWord" placeholder="输入内容" maxlength="300" @input="contentError=''"></textarea>
          <div class="numberWord"><span>{{contentNumberWord}}</span>/300</div>
          <div class="contentError">{{contentError}}</div>
      </div>
      <!-- type="button" @click="submit" -->
      <button  class="dataForm-containe-submit" :disabled="isInSubmit" :class="{disabled:isInSubmit}">{{isInSubmit ? '提交中' : '提交'}}</button>
  </form>
</template>

<script>
import { showMessage } from "../../../utils"
export default {
    data(){
        return {
            // 昵称文字
            nickNameWord:"",
            // 昵称相关报错
            nickNameError:"",
            // 内容文字
            contentWord:"",
            // 内容相关报错
            contentError:"",
            // 不在提交数据中
            isInSubmit:false,
        }
    },
    computed:{
        // 计算昵称长度
        nickNameNumberWord(){
            return this.nickNameWord.length
        },
        // 计算内容长度
        contentNumberWord(){
            return this.contentWord.length
        },
    },
    methods:{
        // 提交表单
        submit(){
            // 获取表单内容，进行去首尾空格优化，并进行判断是否为空
            if(this.nickNameWord.replace(/(^\s*)|(\s*$)/g,"") === "" || this.contentWord.replace(/(^\s*)|(\s*$)/g,"") === ""){
                // 只要有一个输入框内容为空，就不能提交
                // 找到对应错误输入框，进行报错
                if(this.nickNameWord === "" && this.contentWord === ""){
                    // 都错误
                    this.nickNameError = "昵称不能为空"
                    this.contentError = "内容不能为空"
                }else if(this.nickNameWord === ""){
                    this.nickNameError = "昵称不能为空"
                }else{
                    this.contentError = "内容不能为空"
                }
            }else{
                // 所有输入框内容正确，可以提交
                this.isInSubmit = true

                // 获取输入框内容，提交给后端
                // console.log(this.nickNameWord, this.contentWord)
                this.$emit('submit', {nickName:this.nickNameWord, content:this.contentWord}, () => {
                    // 提交给后台以后, 重置输入框
                    this.nickNameWord = "";
                    this.contentWord = "";
                    
                    // 成功弹窗
                    showMessage('收到您的祝福', 'success')

                    // 可以重新提交
                    this.isInSubmit = false
                })
            }
        }
    }
}
</script>

<style scoped lang="less">
.dataForm-container{
    width:100%;
    box-sizing:border-box;
    display:flex;
    flex-direction: column;
    align-items:flex-start;
    margin-bottom:20px;
    .dataForm-container-nickName{
        display:flex;
        flex-direction: column;
        align-items:flex-start;
        box-sizing:border-box;
        width:50%;
        position:relative;
        margin-bottom:20px;
        input{
            width:100%;
            height:40px;
            border-radius:10px;
            border:1px dashed #999;
            padding-left:10px;
            box-sizing: border-box;
            outline:none;
        }
        .numberWord{
            position:absolute;
            bottom:5px;
            right:5px;
            color:#999;
        }
        .nickNameError{
            position:absolute;
            bottom:-20px;
            left:0;
            color:red;
            font-size:14px;
        }
    }
    .dataForm-container-content{
        display:flex;
        flex-direction: column;
        align-items:flex-start;
        box-sizing:border-box;
        width:100%;
        position:relative;
        margin-bottom:30px;
        textarea{
            width:100%;
            height:120px;
            border-radius:10px;
            border:1px dashed #999;
            padding-left:10px;
            box-sizing: border-box;
            padding-top:10px;
            outline:none;
            resize:none;
        }
        .numberWord{
            position:absolute;
            bottom:5px;
            right:5px;
            color:#999;
        }
        .contentError{
            position:absolute;
            bottom:-20px;
            left:0;
            color:red;
            font-size:14px;
        }
    }
    .dataForm-containe-submit{
        background-color:rgb(26, 159, 204);
        padding:10px 20px;
        color:#eee;
        outline:none;
        border:none;
        border-radius:10px;
        cursor:pointer;
        &.disabled{
            background-color:rgb(45, 120, 145);
        }
    }
}
</style>